<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <!--    <template #header>-->
    <!--      <gltitle-->
    <!--          :is_mt="true"-->
    <!--          :is_notice="false"-->
    <!--          :is_back="true"-->
    <!--          :is_name="true"-->
    <!--          :title="title"-->
    <!--      ></gltitle>-->
    <!--    </template>-->
    <template #content>
      <div>
        <div class="container">
          <div class="income-title">{{ title }}</div>
          <div class="level-wrapper">
            <div class="content-wrapper">
              <div class="current-level">
                <img src="@/assets/images/public/level.png" alt="">
                {{ $t('page.当前等级') }}
              </div>
              <div class="level">
                {{ datas.levelName }}
              </div>
              <div class="mflex justify-between">
                <ul>
                  <li>
                    <div class="til">{{ $t("page.doc73") }}(USDT)</div>
                    <div class="data">{{ common.decal2(datas.todayIncome) }}</div>
                  </li>
                  <li>
                    <div class="til">{{ $t("page.doc107") }}(USDT)</div>
                    <div class="data">{{ common.decal2(datas.totalIncome) }}</div>
                  </li>
                </ul>
                <img class="vipImg" :src="require(`@/assets/images/public/vip${datas.userLevel}.png`)" alt="">
              </div>
            </div>
          </div>

          <div class="cname mflex relative">
            <div style="font-weight: 600; font-size: 0.36rem">{{ $t("page.doc108") }}</div>
            <img class="line-img" src="@/assets/images/public/line.png" alt="">
          </div>
        </div>

        <div class="box2">
          <template v-for="item in levels">
            <div class="it" v-if="item.level !== 0" :key="item.level">
              <div class="tit">
                <img class="vipImg" :src="require(`@/assets/images/public/vip${datas.userLevel}.png`)" alt="">
                <div class="box"></div>
                {{ item.name }}
              </div>
              <ul class="bet">
                <li>
                  <div class="s" v-if="item.incomeDailyCount >= 10 && language=='sl_SI'">
                    {{ item.incomeDailyCount }} {{ $t("page.doc103_1") }}
                  </div>
                  <div class="s" v-else>
                    {{ item.incomeDailyCount }} {{ $t("page.doc103") }}
                  </div>
                  <div class="n">{{ $t("page.doc109") }}</div>
                </li>
                <li>
                  <div v-if="item.hasOpen" class="s">
                    {{ item.levelRemainingDays }} {{ $t("page.doc105") }}
                  </div>
                  <div v-else class="s">
                    {{ item.expirationDays }} {{ $t("page.doc105") }}
                  </div>
                  <div v-if="item.hasOpen" class="n">
                    {{ $t("page3.doc82") }}
                  </div>
                  <div v-else class="n">{{ $t("page.doc110") }}</div>
                </li>
                <li>
                  <div class="s s2">
                    <span>{{ common.decal2(item.incomeAmount) }}</span
                    >USDT
                  </div>
                  <div class="n">{{ $t("page.doc111") }}</div>
                </li>
              </ul>

              <!-- 已达到购买限额 -->
              <button
                class="btn btn3"
                v-if="
                  item.purchaseLimit > 0 &&
                  item.hasOpen == false &&
                  item.userBuyCount >= item.purchaseLimit
                "
              >
                {{ $t("page3.doc115") }}
              </button>

              <!-- 立即开通 -->
              <button
                class="btn btn2"
                @click="onGo(item)"
                v-else-if="
                  (item.hasOpenBuy &&
                    item.purchaseLimit == 0 &&
                    item.hasOpen == false) ||
                  (item.purchaseLimit > 0 &&
                    item.hasOpen == false &&
                    item.userBuyCount < item.purchaseLimit)
                "
              >
                <div class="count-down-box" v-if="item.vipPromotionCountdown > 0">
                  {{ item.promotionPrice || 0 }} USDT
                  <span class="count-down">
                    {{ $t("new.doc58") }}：<van-count-down @finish="onFinish"
                                                          :time="item.vipPromotionCountdown * 1000"></van-count-down>
                    </span>
                </div>
                <template v-else>{{ item.price }} USDT {{ $t("page.doc113") }}</template>


              </button>

              <!-- 做任务 评分获取收益 -->
              <button
                class="btn btn1"
                @click="path_url('/income/scenter', item.level)"
                v-else-if="item.hasOpen"
              >
                {{ $t("page3.doc69") }}
                <!-- （{{ item.incomeDailyUseCount }}/{{
                  item.incomeDailyCount
                }}） -->
              </button>
              <div v-else>
                <!-- 即将开放 -->
                <button class="btn btn3">{{ $t("page3.doc92") }}</button>
              </div>
            </div>
          </template>
        </div>
      </div>

      <van-popup
        v-model="password_show"
        round
        :position="is_position"
        style="background: none"
      >
        <div class="password_pop">
          <div class="pass">
            <div class="title rel tac">
              {{ $t("page.doc28") }}
              <div class="abs" @click="passwordShowClick">
                <van-icon name="cross"/>
              </div>
            </div>
            <div class="box rel" :class="{ on: isPc }">
              <input
                type="text"
                v-model="password"
                maxlength="6"
                class="abs"
                ref="getFocus"
              />
              <van-password-input
                :gutter="20"
                :value="password"
                :length="6"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
              />
            </div>
            <button @click="getBtn" :disabled="isDisable">
              {{ $t("page.doc29") }}
            </button>
          </div>
          <div class="jianpan" v-if="!isPc">
            <p>{{ $t("page.doc30") }}</p>
            <van-number-keyboard
              v-model="password"
              :show="showKeyboard"
              @blur="showKeyboard = true"
            />
          </div>
        </div>
      </van-popup>
    </template>
    <template #footer>
      <glFooter :activeTitle="activeTitle"></glFooter>
    </template>
  </page-scroll>
</template>
<script>
import {mapMutations} from "vuex";

export default {
  data() {
    return {
      title: this.$t("title.doc40"),
      activeTitle: "Revenue",

      datas: [],

      levelId: "",
      password: "",
      showKeyboard: true,
      password_show: false,
      isDisable: false,
      isPc: false,
      is_position: "bottom",
      dayTime: [],
      levels: [],
      level: "1",
      language: localStorage.getItem('language') == null ? 'en_US' : localStorage.getItem('language'),
    };
  },

  mounted() {
    this.getList();
    this.getLevel();
  },

  methods: {
    ...mapMutations(["SET_GEADE"]),
    passwordShowClick() {
      this.password_show = false;
      this.password = "";
    },
    getDay(startTime, endTime) {
      let runTime = parseInt((endTime - startTime) / 1000);
      let year = Math.floor(runTime / 86400 / 365);
      runTime = runTime % (86400 * 365);
      let month = Math.floor(runTime / 86400 / 30);
      runTime = runTime % (86400 * 30);
      let day = Math.floor(runTime / 86400);
      runTime = runTime % 86400;
      let hour = Math.floor(runTime / 3600);
      runTime = runTime % 3600;
      let minute = Math.floor(runTime / 60);
      runTime = runTime % 60;
      let second = runTime;
      let result = {
        year,
        month,
        day,
        hour,
        minute,
        second,
      };

      return result;
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levels = res.data;
          setTimeout(() => {
            this.request = false;
          }, 1000)
        } else {
          this.$toast(res.message);
        }
      });
    },

    getList() {
      this.$post(this.URL.wallet.infoNew, {}).then((res) => {
        if (res.code == 0) {
          this.datas = res.data;

          var oDate1 = Date.parse(new Date()); // 获取当前日期
          var oDate2 = Date.parse(this.datas.levelExpirationDate); // 指定未来时间
          if (
            this.getDay(oDate1, oDate2).day == 0 &&
            this.getDay(oDate1, oDate2).hour == 0 &&
            this.getDay(oDate1, oDate2).minute == 0 &&
            this.getDay(oDate1, oDate2).second == 0 &&
            this.getDay(oDate1, oDate2).month == 0
          ) {
            this.dayTime = 0;
          } else {
            this.dayTime = this.getDay(oDate1, oDate2);
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    onFinish() {
      if (this.request) return;
      this.request = true;
      this.getLevel()
    },
    onGo(item) {
      if (!this.$store.state.userData.hasSetPassword) {
        this.$toast(this.$t("page.doc114"));
        this.$router.push({
          path: "/my/password_trade",
          query: {},
        });
        return;
      }

      this.levelId = item.id;
      this.level = item.level;
      this.password_show = true;
      this.$nextTick(function () {
        // 下面打开手机上会出现两个键盘
        // this.$refs.getFocus.focus();
      });
    },
    getBtn() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 1000);

      if (!this.isDisable) {
        return;
      }
      let pass = this.password.slice(0, 6);
      // return
      this.$post(this.URL.home.level_buy, {
        // levelId:this.levelId,
        level: this.level,
        password: this.$md5(pass),
        // password:this.$md5(this.password)
      }).then((res) => {
        if (res.code == 0) {
          this.levelId = "";
          this.password_show = false;
          this.password = "";
          this.getList();
          this.getLevel();
          this.$toast(res.message);
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, level) {
      this.SET_GEADE(level);
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: rgba(17, 85, 59, .1) !important;
}

.page {
  background: #0d2623 url("../../assets/images/huiyuan-bg.png") no-repeat fixed;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.cname {
  .line-img {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 80px;
    height: 5px;
  }
}

.income-title {
  margin-top: 58px;
  margin-bottom: 16px;
  font-size: .36rem;
  font-weight: 600;
}

.container {
  padding-top: 20px;
}

.cname {
  color: #FFF;
  font-size: .32rem;
  padding: .24rem 0;

  img {
    width: 60px;
  }
}

.level-wrapper {
  position: relative;
  margin-bottom: 20px;

  img {
    width: 100%;
    border-radius: 0 0 15px 15px;
  }

  .content-wrapper {
    width: 100%;
    height: 100%;
    padding: 20px 18px 10px;
    background: linear-gradient(135deg, #0e5135 0%, rgba(15, 51, 42, 1) 100%);
    border: 1px solid #066938;
    border-radius: 10px;

    ul {
      flex: 1;
      margin-top: 20px;
      border-radius: 0.2rem;

      li {
        display: flex;
        align-items: center;

        &:first-child {
          margin-bottom: 14px;
        }

        .data {
          font-size: 0.32rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: var(--COcolor3);
          margin-left: 14px;
        }

        .til {
          color: #82A6A9;
        }
      }
    }

    .vipImg {
      width: 90px;
      display: block;
    }

    .level {
      font-size: 20px;
      font-weight: 600;
      color: #06CE64;
    }

    .current-level {
      position: absolute;
      height: 32px;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-weight: 600;
      background: linear-gradient(180deg, rgba(153, 236, 103, 1) 0%, rgba(73, 224, 134, 1) 100%);
      color: #000;
      border-radius: 0 10px 0 10px;

      img {
        width: 16px;
        margin-right: 5px;
      }
    }
  }
}

.bet {
  li {
    width: 32.33%;
  }
}

.count-down-box {
  display: flex;
  align-items: center;
  justify-content: center;

  .count-down {
    //color: #0EEF68;
    font-size: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .12rem;

    .van-count-down {
      color: #fff;
      font-size: 0.28rem;
    }
  }
}

.box1 {
  background: url("../../assets/images/bg-1.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0.12rem;
  margin-bottom: 0.32rem;
  padding: 0.34rem 0.24rem;

  .name {
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.32rem;
    margin-bottom: 0.3rem;

    span {
      font-size: 0.22rem;
      font-style: italic;
    }

    img {
      vertical-align: middle;
      height: 0.2rem;
      margin-left: 0.06rem;
    }
  }

  li {
    text-align: center;

    &:last-child {
      border-left: 1px solid #47464a;
    }
  }

  .s {
    font-size: 0.36rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.36rem;
    margin-bottom: 0.16rem;
  }

  .n {
    font-size: 0.24rem;
    color: #ababb2;
    line-height: 0.33rem;
  }
}

.box2 {
  margin-top: 10px;
  margin-bottom: 1.3rem;

  .btn {
    display: block;
    width: 86%;
    margin: 0 auto;
    border-radius: 0;
  }

  .it {
    margin-bottom: 0.24rem;
    border-radius: 0.2rem;
    background: url("../../assets/images/public/djk.png") no-repeat;
    background-size: 100% 100%;
    padding: 14px 0 34px;
  }

  .title {
    background: url("../../assets/images/j3.png") no-repeat;
    width: 3.61rem;
    height: 0.63rem;
    text-align: center;
    background-size: 100% 100%;
    line-height: 0.63rem;
    margin: 0 auto;
    margin-top: -0.4rem;
  }

  .tit {
    font-size: 14px;
    margin-bottom: 0.24rem;
    display: flex;
    align-items: center;
    padding: 0 0 10px 20px;

    img {
      width: 29px;
    }

    .box {
      width: 5px;
      height: 16px;
      border-radius: 8px;
      background: #77E774;
      margin: 0 0.12rem;
    }
  }

  ul {
    text-align: center;
    margin-bottom: 0.3rem;
  }

  .s {
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.45rem;
    margin-bottom: 0.08rem;
  }

  .s2 {
    //color: var(--COcolor2);
    font-size: 0.24rem;

    span {
      font-size: 0.36rem;
      margin-right: 0.06rem;
    }
  }

  .n {
    font-size: 0.24rem;
    color: var(--COcolor1);
    line-height: 0.33rem;
  }

  button {
    height: 0.8rem;
    font-size: 0.28rem;
  }
}

.btn1 {
  background: url("../../assets/images/public/button.png") no-repeat;
  background-size: 100% 100%;
  color: #06CE64;
}

.btn2 {
  background: url("../../assets/images/public/button2.png") no-repeat;
  background-size: 100% 100%;
  color: #000;
}

.btn3 {
  background: url("../../assets/images/public/button.png") no-repeat;
  background-size: 100% 100%;
  color: #06CE64;
}

.head_list {
  padding: 0.24rem;
  background: var(--CObackgroundLinear2);
  border-radius: 0.2rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-top: 0.22rem;
  margin-bottom: 0.36rem;

  .title {
    margin-bottom: 0.24rem;
    display: flex;
    align-items: center;

    .levt {
      font-size: 0.32rem;
      font-weight: 500;
    }

    img {
      margin: 0rem 0.12rem;
      height: 0.28rem;
    }

    .levt_name {
      color: var(--COcolor2);
    }
  }

  ul {
    background: var(--CObackgroundLinear3);
    border-radius: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 0.12rem;

    li {
      width: 48.99%;
      padding: 0.36rem 0.38rem;

      .data {
        font-size: 0.32rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: var(--COcolor3);
      }

      .til {
        margin-top: 0.16rem;
        color: var(--COcolor1);
      }
    }

    li:first-child {
      border-right: var(--COborder2);
      border-bottom: var(--COborder2);
    }

    li:last-child {
      border-left: var(--COborder2);
      border-top: var(--COborder2);
    }
  }
}
</style>
